

<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      :title="formValue.id > 0 ? '编辑活动管理 #' + formValue.id : '添加活动管理'"
      :style="{
        width: dialogWidth,
      }"
    >
      <n-scrollbar style="max-height: 87vh" class="pr-5">
        <n-spin :show="loading" description="请稍候...">
          <n-descriptions label-placement="left" class="py-2" :column="1">
            <n-descriptions-item>
              <template #label>
                活动名称
              </template>
              {{ formValue.title }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                开始时间
              </template>
              {{ formValue.startAt }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                结束时间
              </template>
              {{ formValue.endAt }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                直播流地址
              </template>
              {{ formValue.streaming }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                规则
              </template>
              <span v-html="formValue.rule"></span>
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                三方推流地址
              </template>
              {{ formValue.upStream }}
            </n-descriptions-item>
            <n-descriptions-item>
              <template #label>
                播放页面地址
              </template>
              {{ formValue.url }}
            </n-descriptions-item>
            <n-descriptions-item label="状态">
              <n-tag :type="dict.getType('sys_finish', formValue.status)" size="small" class="min-left-space">
                {{ dict.getLabel('sys_finish', formValue.status) }}
              </n-tag>
            </n-descriptions-item>
          </n-descriptions>
        </n-spin>
      </n-scrollbar>
      <template #action>
        <n-space>
          <n-button @click="closeForm">
            取消
          </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm">
            确定
          </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { View } from '@/api/activity';
  import {State, newState, rules} from './model';
  import { adaModalWidth } from '@/utils/hotgo';
  import { getFileExt } from '@/utils/urlUtils';
  import { useDictStore } from '@/store/modules/dict';
  import DatePicker from "@/components/DatePicker/datePicker.vue";

  const message = useMessage();
  const dict = useDictStore();
  const loading = ref(false);
  const showModal = ref(false);
  const formValue = ref(newState(null));
  const dialogWidth = computed(() => {
    return adaModalWidth(580);
  });
  const fileAvatarCSS = computed(() => {
    return {
      '--n-merged-size': `var(--n-avatar-size-override, 80px)`,
      '--n-font-size': `18px`,
    };
  });

  // 下载
  function download(url: string) {
    window.open(url);
  }

  // 打开模态框
  function openModal(state: State) {
    showModal.value = true;
    loading.value = true;
    View({ id: state.id })
      .then((res) => {
        formValue.value = res;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less" scoped></style>
